<template>
  <view class="content">
    <view class="tab-block">
      <u-tabs :list="tabList" :scrollable="false" :activeStyle="{ fontSize: '28rpx', color: '#3C9CFF' }" :inactiveStyle="{ fontSize: '28rpx' }" @click="tabClick"></u-tabs>
    </view>
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index">
        <view class="header-block border-b-common pb-20">
          <view class="date-block">整改期限：{{item.rectificationLimit ? item.rectificationLimit : '-'}}</view>
          <view class="date-block">延期日期：{{item.deferDate ? item.deferDate : '-'}}</view>
          <u-tag size="mini" plain :text="item.stateName"></u-tag>
        </view>
        <view class="body-block border-b-common pb-10">
          <view class="body-item pt-20 pb-25">隐患名称：{{item.htName ? item.htName : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患等级：{{item.levelName ? item.levelName : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查单位：{{item.checkDept ? item.checkDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          <view class="body-item pt-20 pb-25">所属单位：{{item.beCheckDept ? item.beCheckDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患描述：{{item.description ? item.description : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患来源：{{item.sourceName ? item.sourceName : '-'}}</view>
          <view v-if="params.states == 'd'" class="body-item pt-20 pb-25">整改方式：{{item.rectificationType == 1 ? '限期整改' : '立即整改'}}</view>
          <view v-if="params.states == 1 || params.states == 2" class="body-item pt-20 pb-25">整改措施：{{item.rectificationMeasure ? item.rectificationMeasure : '-'}}</view>
          <view v-if="params.states != 1" class="body-item pt-20 pb-25">延期申请人：{{item.deferApplyPeo ? item.deferApplyPeo : '-'}}</view>
          <view v-if="params.states != 1" class="body-item pt-20 pb-25">延期审批人：{{item.deferApprovePeo ? item.deferApprovePeo : '-'}}</view>
          <view v-if="params.states != 1" class="body-item pt-20 pb-25">延期审批时间：{{item.deferApproveDate ? item.deferApproveDate : '-'}}</view>
          <!-- <view  class="body-item pt-20 pb-25">延期审批结果：{{item.deferApproveResult ? item.deferApproveResult : '-'}}</view>
          <view  class="body-item pt-20 pb-25">审批拒绝原因：{{item.deferApproveInfo ? item.deferApproveInfo : '-'}}</view> -->
        </view>
        <view class="footer-block pt-20">
          <view class="info-block">
            <view class="date-block">检查日期：{{item.checkDate ? item.checkDate : '-'}}</view>
            <view class="date-block mt-10">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          </view>
          <view class="button-block">
            <u-button v-if="params.states == 1" class="button" type="warning" :customStyle="{width: '200rpx', height: '50rpx', backgroundColor: '#f9AE3D !important', color: '#FFFFFF'}" text="申请延期" @click="routeToUpdate(item.id)"></u-button>
            <u-button v-if="params.states != 'd'" class="button" type="primary" :customStyle="{width: '120rpx', height: '50rpx', marginLeft: '20rpx'}" text="整改" @click="routeToDetail(item.id)"></u-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
  </view>
</template>

<script>
  import { getDangerEditListApi } from '@/apis/danger/index.js'
  
  export default {
    data() {
      return {
        params: {
          pageNo: 1,
          pageSize: 10,
          states: 1
        },
        tabList: [
          { name: '待整改', value: 1 },
          { name: '延期待整改', value: 2 },
          { name: '逾期未整改', value: 99 },
          { name: '已整改', value: 'd' },
        ],
        list: [],
        pushState: true
      }
    },
    onPullDownRefresh() {
      this.getDangerEditList(Object.assign(this.params, {pageNo: 1, pageSize: 10}))
    },
    onReachBottom() {
      if(this.pushState) this.getDangerEditList(Object.assign(this.params, {pageNo: this.params.pageNo + 1}), false)
    },
    onShow() {
      this.getDangerEditList(Object.assign(this.params, {pageNo: 1}))
    },
    methods: {
      getDangerEditList: function(params, freshState = true) {
        getDangerEditListApi(params).then(res => {
          if(freshState) {
            this.pushState = true
            this.list = res.list
            console.log(this.list);
          } else {
            this.list = this.list.concat(res.list)
          }
          if(res.list.length < this.params.pageSize) this.pushState = false
          uni.stopPullDownRefresh()
        }).catch(err => console.warn(err))
      },
      tabClick: function(event) {
        console.log(event.value);
        Object.assign(this.params, { states: event.value, pageNo: 1})
        this.getDangerEditList(this.params)
      },
      routeToDetail: function(id) {
        uni.navigateTo({ url: '/pagesDanger/dangerEditDetail?id='+ id +'&states='+ this.params.states })
      },
      routeToUpdate: function(id) {
        uni.navigateTo({ url: `/pagesDanger/dangerEditUpdate?id=${id}` })
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
</style>

<style lang="scss" scoped>
  .border-b-common { 
    border-bottom: 1rpx solid #F4F4F4; 
  }
  .content {
    padding: 90rpx 25rpx 50rpx 25rpx;
    .tab-block {
      background-color: #FFFFFF;
      z-index: 99;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    .list-block {
      .item-block {
        background-color: #FFFFFF;
        border-radius: 6rpx;
        box-shadow: 0 0 10rpx 0 #F4F4F4;
        padding: 25rpx;
        margin-top: 25rpx;
        .header-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .date-block {
            width: 260rpx;
            font-size: 24rpx;
            line-height: 32rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .body-block {
          .body-item {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .footer-block {
          @extend .header-block;
          align-items: flex-end;
        }
        .button-block {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .button {
            width: 100rpx;
          }
        }
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
  }
</style>
